import React from "react"
// 导入返回按钮
import {Button,Icon} from "antd"
// 导入加载内容的组件 
import { Spin, Alert } from 'antd';

import fetchJSONP from "fetch-jsonp"
export default class MovieDetail extends React.Component{
    constructor(props){
        super(props)
        this.state={
            info:{}
        }
    }
    componentWillMount(){
        fetchJSONP(`https://douban.uieee.com/v2/movie/subject/${this.props.match.params.id}`).then(res=>res.json())
        .then(data=>{
            this.setState({
                info:data,
                isLoading:false
            })
        })
    }
    render(){
        return <div>
            <Button type="primary" onClick={this.goBack}>
                <Icon type="left"/>返回电影列表页面
            </Button>
            {this.renderInfo()}
        </div>
    }
    // 实现返回按钮的功能
    goBack=()=>{
        this.props.history.go(-1)
    }
    renderInfo=()=>{
        if(this.state.isLoading){
            return<Spin tip="Loading...">
            <Alert
                message="正在请求电影信息列表"
                description="精彩内容马上呈现......"
                type="info" />
            </Spin>
        }else{
            const dss=this.state.info.images.large
            console.log(dss)
            return <div style={{textAlign:"center"}}>
                 <h1>{this.state.info.title}</h1>
                {/* <img src={this.state.info.images.large} alt=""/> */}
                <p style={{textIndent:'2em',lineHeight:'30px'}}>{this.state.info.summary}</p>
            </div>
           
        }
    }
}